<template>
  <div class="wraper">
    <el-popover placement="bottom" width="180" trigger="click">
      <div class="wraper-content">
        <div v-for="(item, index) in listData" :key="index" class="wraper-item">
          <i v-if="!item.isHidden" class="iconfont icon-mulu" />
          <el-checkbox
            v-if="!item.isHidden"
            :value="!item.checked"
            :disabled="item.key"
            class="checkbox"
            :title="item.title"
            @change="handleChange(index)"
          >{{ item.title }}</el-checkbox>
        </div>
      </div>
      <el-button slot="reference" size="mini" type="primary">
        <i class="iconfont icon-zidingyilie" />自定义列
      </el-button>
    </el-popover>
  </div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
  props: {
    dateSource: Array
  },
  data() {
    return {
      visible: false,
      listData: []
    }
  },
  watch: {
    dateSource: {
      handler(value) {
        if (value.length > 0) {
          this.listData = JSON.parse(JSON.stringify(this.dateSource))
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.rowDrop()
    })
  },
  methods: {
    handleChange(index) {
      this.listData.forEach((item, itIndex) => {
        if (index === itIndex) {
          this.$set(item, 'checked', !item.checked)
          this.$emit('customColumnsCallback', {})
        }
      })
      this.$emit('update:dateSource', this.listData)
    },
    rowDrop() {
      const el = this.$el.querySelector('.wraper-content')
      Sortable.create(el, {
        animation: 150,
        ghostClass: 'blue-background-class',
        onEnd: ({ newIndex, oldIndex }) => {
          this.listData.splice(
            newIndex,
            0,
            this.listData.splice(oldIndex, 1)[0]
          )
          var newArray = this.listData.slice(0)
          this.listData = []
          this.$nextTick(function() {
            this.listData = newArray
            this.$emit('update:dateSource', newArray)
          })
        }
      })
    },
    handleClick() {
      this.visible = true
    }
  }
}
</script>
<style lang="less" scoped>
.wraper {
  margin: -1px 5px 0px 5px;
  &-content {
    max-height: 280px;
    overflow: auto;

    .wraper-item {
      display: flex;
      align-items: center;
      // overflow: hidden;
      margin-bottom: 5px;

      .icon-mulu {
        margin-right: 10px;
        font-size: 18px;
      }

      .checkbox {
        /deep/.el-checkbox__label {
          overflow: hidden;
          text-overflow: ellipsis;
          display: inline-block;
          width: 100px;
          vertical-align: bottom;
        }
      }
    }
  }

  .icon-zidingyilie {
    margin-right: 5px;
  }

  /deep/.el-button--primary {
    border: 1px solid #217dfa;
    border-radius: 4px;
    background: #fff;
    color: #217dfa;
    height: 27px;
    display: flex;
    align-items: center;

    >span {
      display: flex;
      align-items: center;
    }
  }
}
</style>
